import { Modal, Button } from "antd";
import React from "react";
const CrudModal = (props) => {
  //解构组件传递参数
  const {
    visible = true,
    setModalVisible,
    width = 600,
    title = "",
    loading = false,
    handleSave,
    clearFormFields,
    showFooter = true,
  } = props;
  const children = React.Children.toArray(props.children);

  return (
    <>
      <Modal
        wrapClassName="my-modal"
        width={width}
        title={title}
        open={visible}
        onCancel={() => {
          /* 
            底部自定义了，因此这个函数不会操控底部按钮取消，只针对顶部默认按钮取消
          */
          //关闭弹窗
          setModalVisible(false);
          typeof clearFormFields === "function" && clearFormFields();
        }}
        footer={
          showFooter
            ? [
                <Button
                  key="cancel"
                  onClick={() => {
                    //关闭弹窗
                    setModalVisible(false);
                    typeof clearFormFields === "function" && clearFormFields();
                  }}
                >
                  取消
                </Button>,
                <Button
                  key="ok"
                  loading={loading}
                  type="primary"
                  onClick={handleSave}
                >
                  保存
                </Button>,
              ]
            : null
        }
      >
        {children}
      </Modal>
    </>
  );
};

export default CrudModal;
